<template>
  <div class="arrow-box" :style="{ transform: `rotate(${rotation}deg)` }">
    <i class="icon" :style="{ ...styleObj, color, width: size, height: size }" />
  </div>
</template>

<script>
export default {
  name: 'arrow-animate',
  props: {
    color: {
      default: '#ffffff',
      type: String,
    },
    size: {
      default: '.2rem',
      type: [Number, String],
    },
    styleObj: {
      default: () => {},
      type: Object,
    },
  },
  data() {
    return {
      rotation: 0,
    }
  },
  methods: {
    rotateArrow() {
      this.rotation += 180
    },

    unRotateArrow() {
      this.rotation = 0
    },
  },
}
</script>

<style scoped lang="less">
.arrow-box {
  transition: transform 0.3s ease;
  height: 16px;
  display: flex;
  align-items: center;

  .play {
    transform: rotate(90deg);
  }

  .icon {
    display: block;
    width: 100%;
    height: 100%;
    background: url('@/assets/img/game/arrow_down.png') center center no-repeat;
    background-size: contain;
  }
}
</style>
